<template>
  <div>
    <centerHeader :title="header"></centerHeader>
    <div class="znts">
      <div class="card">
        <div class="card-tent">
            <div class="card-nav">
                <span>{{OneGraphic.title}}</span>
                <img src="../../../public/img/edit2.png" alt="" @click="setOnetitle">
            </div>
            <p class="pic"><img :src="OneGraphic.pic_url" alt=""><span></span><span @click="changeimg(-1)">更换图片</span></p>
            <div class="read-article" v-if="!Graphic.length"><span>阅读原文</span><img src="../../../public/img/imgright.png" alt=""></div>
            <div class="content" v-for="(item, index) in Graphic" :key="index">
                <div>
                    <p><span>{{item.title}}</span><span><i @click="setTitle(index)"></i><i @click="delNews(index)"></i></span></p>
                    <span v-if="!item.url" class="unconfigured" >链接未配置</span>
                    <span v-else>{{item.url}}</span>
                </div>
                <span @click="changeimg(index)" :style="{backgroundImage: 'url(' + item.pic_url + ')', backgroundSize: 'cover', backgroundPosition: 'center'}"></span>
            </div>
        </div>
        <div class="btn" @click="addNews"><span class="el-icon-plus"></span><span>添加次条</span></div>
      </div>
      <div class="footer">
          <p><label for="">测试粉丝ID：</label><input type="text" v-model="ceshifensi"><span @click="ceshi" >测试发送</span></p>
          <p>用测试粉丝帐号点公众号菜单 "粉丝导航" > "个人中心"。</p>
          <p><span @click="sendData">保存</span><span @click="$router.go(-1)">取消</span></p>
      </div>
    </div>

    <!-- 设置标题 -->
    <el-dialog title="设置标题" :visible.sync="dialogVisible1" width="50%">
    <div>
      <el-form  label-width="100px">
        <el-form-item label="图文标题">
          <el-input placeholder="请输入图文标题内容" v-model="titlevalue" clearable class="input"></el-input>
          <span class="selected" @click="xuanze">选择</span>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-autocomplete class="inline-input" v-model="urlvalue" :fetch-suggestions="querySearch" placeholder="请输入原文链接" @select="handleSelect" clearable></el-autocomplete>
        </el-form-item>
      </el-form>
      <span @click="submitForm" class="dialog-footer">提交</span>
    </div>
  </el-dialog>

  <!-- 选择标题 -->
  <el-dialog title="选择标题" :visible.sync="dialogVisible2" width="50%" >
    <div>
      <p class="dialog_top">
        <span :class="TitleLibrary.select_type==0?'dialog_top_checked':''" @click="getTitleLibrary(0)">全部</span>
        <span :class="TitleLibrary.select_type==1?'dialog_top_checked':''" @click="getTitleLibrary(1)">通用</span>
        <span :class="TitleLibrary.select_type==2?'dialog_top_checked':''" @click="getTitleLibrary(2)">男频</span>
        <span :class="TitleLibrary.select_type==3?'dialog_top_checked':''" @click="getTitleLibrary(3)">女频</span>
      </p>
      <div class="titlelist">
        <p v-for="(item,index) in TitleLibrary.title_list" :key="index" class="titletext" @click="setitem(item)">{{item.title}}</p>
      </div>
    </div>
    <div class="getMore" @click="getMoretitle">加载更多...</div>
    <span slot="footer" class="dialogf">
      <el-button @click="dialogVisible2 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 更换图片 -->
  <el-dialog title="选择封面" :visible.sync="dialogVisible" width="30%">
    <div>
      <p class="dialog_top">
        <span :class="PhotoGallery.select_type==0?'dialog_top_checked':''" @click="getPhotoGallery(0)">全部</span>
        <span :class="PhotoGallery.select_type==1?'dialog_top_checked':''" @click="getPhotoGallery(1)">通用</span>
        <span :class="PhotoGallery.select_type==2?'dialog_top_checked':''" @click="getPhotoGallery(2)">男频</span>
        <span :class="PhotoGallery.select_type==3?'dialog_top_checked':''" @click="getPhotoGallery(3)">女频</span>
      </p>
      <div class="imglist">
        <img :src=item.picurl alt="" v-for="(item,index) in PhotoGallery.photo_list" :key="index" @click="setOneGraphicurl(item.picurl)" >
      </div>
      <div class="getMore" @click="getMoreimg">加载更多...</div>
    </div>
    <span slot="footer" class="dialogf">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>

  </div>
</template>
<script>
import centerHeader from "../../../components/center-header";
export default {
  data() {
    return {
      header: [{ title: "智能推送", path: "/home/Extension/intelligence" }],
      value1: true,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      url: "http://d",
      //first标题
      OneGraphic: {
        title: "",
        pic_url: "",
        url: ""
      },
      //次条标题
      Graphic: [],
      //标题库
      TitleLibrary: [
        {
          title: "",
          type: ""
        }
      ],
      //图片库
      PhotoGallery: [
        {
          picurl: ""
        }
      ],
      titlevalue: "",
      urlvalue: "",
      restaurants: [],
      submitType: "",
      state1: "",
      state2: "",
      index: -1,
      parameter: {
        type: 0,
        page: 1
      },
      ceshifensi: "",
      customer: {
        msgtype: "news",
        news: {
          articles: []
        }
      },
      type: 0
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    settitle() {
      let that = this;
      that.dialogVisible1 = false;
      if (that.index == -1) {
        that.OneGraphic.title = that.titlevalue;
      } else {
        that.OneGraphicList[that.index].title = that.titlevalue;
        that.OneGraphicList[that.index].url = that.lianjie;
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/getPromoteList", {
          d_id: JSON.parse(localStorage.userInfo).user_id
        })
        .then(function(res) {
          that.restaurants = res.data.data;
          that.restaurants.forEach((item, index) => {
            item.value = item.name;
            item.url =
              that.url +
              JSON.parse(localStorage.userInfo).user_id +
              ".131452.com/#/setcookies/" +
              item.id;
            // item.address = item.promote_url;
          });
        });
    },
    handleSelect(item) {
      // console.log(item);
      this.urlvalue = item.url;
    },
    submitForm() {
      if (this.submitType.indexOf("_") >= 0) {
        let type = this.submitType.split("_");
        this[type[0]][type[1]].title = this.titlevalue;
        this[type[0]][type[1]].url = this.urlvalue;
      } else {
        this[this.submitType].title = this.titlevalue;
        this[this.submitType].url = this.urlvalue;
      }
      this.dialogVisible1 = false;
    },
    addNews() {
      let that = this;
      if (that.Graphic.length < 7) {
        that.axios.post("/cp/v1/push/getRandomset").then(res => {
          if (res.data.code === 200) {
            res.data.data.url = "";
            that.Graphic.push(res.data.data);
          }
        });
      } else {
        that.$message.warning("最多可添加8条图文消息");
      }
    },
    delNews(idx) {
      this.Graphic.splice(idx, 1);
    },
    setOnetitle() {
      this.titlevalue = this.OneGraphic.title;
      this.urlvalue = this.OneGraphic.url;
      this.submitType = "OneGraphic";
      this.dialogVisible1 = true;
    },
    setTitle(idx) {
      this.titlevalue = this.Graphic[idx].title;
      this.urlvalue = this.Graphic[idx].url;
      this.submitType = "Graphic_" + idx;
      this.dialogVisible1 = true;
    },
    xuanze() {
      let that = this;
      that.getTitleLibrary(0);
      that.dialogVisible2 = true;
    },
    setitem(item) {
      let that = this;
      that.titlevalue = item.title;
      that.dialogVisible2 = false;
    },
    settitlevalue() {
      this.titlevalue =
        this.index == -1
          ? this.OneGraphic.title
          : this.OneGraphicList[this.index].title;
      if (this.index != -1) {
        this.lianjie = this.OneGraphicList[this.index].url;
      }
    },
    getTitleLibrary(type) {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/getTitleLibrary", {
          type: type
        })
        .then(res => {
          if (res.data.code == 200) {
            that.TitleLibrary = res.data.data;
          }
        });
    },
    //set图片
    setOneGraphicurl(url) {
      let that = this;
      if (that.index >= 0) {
        that.Graphic[that.index].pic_url = url;
      } else {
        that.OneGraphic.pic_url = url;
      }
      that.dialogVisible = false;
    },
    //更换图片
    changeimg(type) {
      let that = this;
      that.index = type;
      that.getPhotoGallery(0);
      this.dialogVisible = true;
    },
    //获取图片库
    getPhotoGallery(type) {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/getPhotoGallery", {
          type: type
        })
        .then(res => {
          if (res.data.code == 200) {
            that.PhotoGallery = res.data.data;
          }
        });
    },
    getMoreimg() {
      let that = this;
      that.parameter.type = that.index;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/Customer/getPhotoGallery",
          parameter: that.parameter,
          oldArr: that.PhotoGallery
        },
        function(res) {
          if (res) {
          } else {
            that.$message.warning("没有数据啦");
            console.log("ccc");
          }
        },
        function(arr) {
          that.PhotoGallery = arr;
        }
      );
    },
    getMoretitle() {
      let that = this;
      that.parameter.type = that.index;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/Customer/getTitleLibrary",
          parameter: that.parameter,
          oldArr: that.TitleLibrary
        },
        function(res) {
          if (res) {
          } else {
            that.$message.warning("没有数据啦");
          }
        },
        function(arr) {
          that.TitleLibrary = arr;
        }
      );
    },
    ceshi() {
      let that = this;
      if (!that.ceshifensi) {
        this.$message.error("请输入测试粉丝ID");
      } else {
        if (that.Graphic.length) {
          if (
            that.checkvalue() &&
            that.OneGraphic.title &&
            that.OneGraphic.url &&
            that.OneGraphic.pic_url
          ) {
            that.customer.news.articles = [
              that.OneGraphic,
              ...that.Graphic
            ];
            console.log(that.customer);
            that.axios
              .post("/cp/v1/Customer/testSend", {
                d_id: JSON.parse(localStorage.userInfo).user_id,
                customer: that.customer,
                user_id: that.ceshifensi
              })
              .then(res => {
                if (res.data.code == 200) {
                  that.$message.success("测试成功!");
                } else {
                  console.log(res);
                  that.$message.error("网络异常，请重试!");
                }
              });
          } else {
            if (
              !that.OneGraphic.url &&
              that.checkvalue() &&
              that.OneGraphic.title &&
              that.OneGraphic.pic_url
            ) {
              that.$message.error("请输入首条图文消息的原文链接!");
            } else {
              that.$message.error("请将信息输入完再提交!");
            }
          }
        } else {
          if (
            that.OneGraphic.title &&
            that.OneGraphic.url &&
            that.OneGraphic.pic_url
          ) {
            that.customer.news.articles = [that.OneGraphic];
            console.log(that.customer);
            that.axios
              .post("/cp/v1/Customer/testSend", {
                d_id: JSON.parse(localStorage.userInfo).user_id,
                customer: that.customer,
                user_id: that.ceshifensi
              })
              .then(res => {
                if (res.data.code == 200) {
                  that.$message.success("测试成功!");
                } else {
                  console.log(res);
                  that.$message.error("网络异常，请重试!");
                }
              });
          } else {
            if (
              !that.OneGraphic.url &&
              that.OneGraphic.title &&
              that.OneGraphic.pic_url
            ) {
              that.$message.error("请输入首条图文消息的原文链接!");
            } else {
              that.$message.error("请将信息输入完再提交!");
            }
          }
        }
      }
    },
    checkvalue() {
      let a = 0;
      for (var i = 0; i < this.Graphic.length; i++) {
        if (
          this.Graphic[i].title &&
          this.Graphic[i].pic_url &&
          this.Graphic[i].url
        ) {
          a++;
          console.log(a);
        }
      }
      if (a === this.Graphic.length) {
        return true;
      } else {
        return false;
      }
    },
    randomNews() {
      let that = this;
      that.axios.post("/cp/v1/push/getRandomset").then(res => {
        if (res.data.code === 200) {
          res.data.data.url = "";
          that.OneGraphic = res.data.data;
        }
      });
    },
    sendData() {
      let that = this;
      if (that.Graphic.length) {
        if (
          that.checkvalue() &&
          that.OneGraphic.title &&
          that.OneGraphic.url &&
          that.OneGraphic.pic_url
        ) {
          console.log(that.customer.news.articles);
          that.customer.news.articles = [
            that.OneGraphic,
            ...that.Graphic
          ];
          console.log(that.customer);
          that.axios
            .post("/cp/v1/push/getSetpush", {
              d_id: JSON.parse(localStorage.userInfo).user_id,
              customer: that.customer,
              type: that.type
            })
            .then(res => {
              if (res.data.code == 200) {
                that.$message.success("保存成功!");

              } else {
                console.log(res);
                that.$message.error("网络异常，请重试!");
              }
            });
        } else {
          if (
            !that.OneGraphic.url &&
            that.checkvalue() &&
            that.OneGraphic.title &&
            that.OneGraphic.pic_url
          ) {
            that.$message.error("请输入首条图文消息的原文链接!");
          } {
            that.$message.error("请将信息输入完再提交!");
          }
        }
      } else {
        if (
          that.OneGraphic.title &&
          that.OneGraphic.url &&
          that.OneGraphic.pic_url
        ) {
          that.customer.news.articles = [that.OneGraphic];
          console.log(that.customer);
          that.axios
            .post("/cp/v1/push/getSetpush", {
              d_id: JSON.parse(localStorage.userInfo).user_id,
              customer: that.customer,
              type: that.type
            })
            .then(res => {
              if (res.data.code == 200) {
                that.$message.success("保存成功!");
              } else {
                console.log(res);
                that.$message.error("网络异常，请重试!");
              }
            });
        } else {
          if (
            !that.OneGraphic.url &&
            that.OneGraphic.title &&
            that.OneGraphic.pic_url
          ) {
            that.$message.error("请输入首条图文消息的原文链接!");
          } else {
            that.$message.error("请将信息输入完再提交!");
          }
        }
      }
    }
  },
  created() {
    this.loadAll();
    console.log(this.$route.query.type)
    this.type = this.$route.query.type;
    let that = this;
    that.axios
      .post("/cp/v1/push/getinfo", {
        type: that.type,
        d_id: JSON.parse(localStorage.userInfo).user_id
      })
      .then(res => {
        console.log(res);
        if (res.data.code === 200) {
          let arr = res.data.data;
          that.OneGraphic = arr[0];
          arr.shift();
          that.Graphic = arr;
        } else {
          that.randomNews();
        }
      });
  },
  components: {
    centerHeader
  }
};
</script>
<style scoped>
/* 智能推送 */
.znts {
  width: 100%;
  padding: 15px 0 0 0;
  font-size: 14px;
  color: #666;
}
.card {
  width: 35%;
  margin: 0 auto;
  padding: 18px;
  background: #f5f5f5;
  box-shadow: 0px 0px 8px rgba(51, 51, 51, 0.23);
  margin-bottom: 25px;
}
.card-tent {
  width: 100%;
  background: #ffffff;
  padding: 22px 26px 12px;
  box-sizing: border-box;
  margin-bottom: 18px;
}
.card-tent .card-nav {
  width: 100%;
  background: #ffffff;
  margin-bottom: 22px;
}
.card-tent .card-nav {
  width: 100%;
  background: #ffffff;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-tent .card-nav span {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.card-tent .card-nav img {
  width: 19px;
  height: 17px;
}
.card-tent .card-nav img:hover {
  cursor: pointer;
}
.card-tent .pic {
  width: 100%;
  height: 240px;
  position: relative;
  margin-bottom: 23px;
}
.card-tent .pic img {
  width: 100%;
  height: 100%;
}
.card-tent .pic span:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: all 0.2s ease 0s;
}
.card-tent .pic span:nth-child(3) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 37px;
  border-radius: 6px;
  background: #36a4ff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.2s ease 0s;
}
.card-tent .pic span:nth-child(3)::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 17px;
  background: url(../../../public/img/edit1.png);
  background-size: 100%;
  margin-right: 10px;
}
.card-tent .pic:hover span:nth-child(2) {
  background: rgba(0, 0, 0, 0.5);
}
.card-tent .pic:hover span:nth-child(3) {
  opacity: 1;
  cursor: pointer;
}
.content {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  border-top: 1px solid #eee;
  padding: 10px 0;
}
.content div {
  width: 88%;
}
.content div p {
  padding-right: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.content div p span:first-child {
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.content div p span:last-child i:first-child {
  display: inline-block;
  width: 19px;
  height: 17px;
  background: url(../../../public/img/edit2.png) no-repeat;
  background-size: 100%;
  margin-right: 10px;
}
.content div p span:last-child i:first-child:hover {
  cursor: pointer;
}
.content div p span:last-child i:last-child {
  display: inline-block;
  width: 12px;
  height: 19px;
  background: url(../../../public/img/edit4.png) no-repeat;
  background-size: 100%;
}
.content div p span:last-child i:last-child:hover {
  cursor: pointer;
}
.unconfigured {
  color: red;
}
.content div > span {
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.content > span {
  display: inline-block;
  width: 12%;
  height: 44px;
  /* background: url(../../../public/img/edit0.png) no-repeat center;
  background-size: cover; */
}
.content > span:hover::before {
  content: "更换";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration: underline;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}
.read-article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.read-article img {
  width: 9px;
  height: 17px;
}
.btn {
  width: 178px;
  height: 49px;
  margin: 0 auto;
  background: #36a4ff;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 49px;
}
.btn:hover {
  cursor: pointer;
}
.btn:active {
  background: #0e75ca;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer > p {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.footer p input {
  width: 400px;
  height: 38px;
  margin: 0 auto;
  margin-right: 11px;
  padding: 0 10px;
  box-sizing: border-box;
}
.footer span:last-child {
  display: inline-block;
  width: 75px;
  height: 33px;
  margin: 0 auto;
  margin-right: 11px;
  background: #36a4ff;
  border-radius: 6px;
  text-align: center;
  line-height: 33px;
  color: #fff;
}
.footer span:last-child:hover {
  cursor: pointer;
}
.footer span:last-child:active {
  background: #0e75ca;
}
.footer > p:last-child span {
  display: inline-block;
  width: 75px;
  height: 33px;
  margin: 0 auto;
  background: #36a4ff;
  border-radius: 6px;
  text-align: center;
  line-height: 33px;
  color: #fff;
}
.footer > p:last-child span:first-child {
  margin-right: 25px;
}
.footer > p:last-child span:last-child {
  background: #cccccc;
}
.footer > p:last-child span:first-child:hover {
  cursor: pointer;
}
.footer > p:last-child span:last-child:hover {
  cursor: pointer;
}
.footer > p:last-child span:first-child:active {
  background: #0e75ca;
}
.footer > p:last-child span:last-child:active {
  background: rgb(151, 151, 151);
}
/* 修改标题弹窗 */
.input {
  width: 80%;
  margin-right: 8px;
}
.inline-input {
  width: 80%;
}
.selected {
  display: inline-block;
  width: 12%;
  height: 40px;
  background: #ff9933;
  border-radius: 6px;
  text-align: center;
  line-height: 40px;
  color: #fff;
}
.selected:hover {
  cursor: pointer;
}
.selected:active {
  background: #f08112;
}
.dialog-footer {
  display: block;
  margin: 0 auto;
  width: 119px;
  height: 38px;
  background: #36a4ff;
  border-radius: 6px;
  text-align: center;
  line-height: 38px;
  color: #fff;
}
.dialog-footer:hover {
  cursor: pointer;
}
.dialog-footer:active {
  background: rgb(11, 123, 214);
}
.dialog_top {
  padding: 10px 20px;
  background: #f5f5f5;
}
.dialog_top > span {
  color: #337ab7;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
}
.dialog_top > .dialog_top_checked {
  color: #ffffff;
  background: #337ab7;
}
.imglist {
  width: 100%;
  padding-top: 20px;
}
.imglist > img {
  width: 20%;
  height: 100px;
  margin: 0 10px;
  margin-bottom: 20px;
}
.title_input {
  width: 85%;
  padding-top: 6px;
  padding-bottom: 6px;
}
.titlelist {
  border: 1px solid #cccccc;
  margin-top: 10px;
  padding: 10px;
}
.titletext {
  margin-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 5px;
  cursor: pointer;
}
.titletext:hover {
  text-decoration: underline;
}
.textis {
  display: inline-block;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.getMore {
  width: 194px;
  height: 43px;
  margin: 10px auto;
  margin-bottom: 0px;
  border-radius: 10px;
  background: #f4f4f4;
  color: #666;
  text-align: center;
  line-height: 43px;
  cursor: pointer;
}
</style>
